import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import HelloWorld from '@/components/HelloWorld.vue'

const app = createApp(App)
app.use(store).use(router).mount('#app')
app.component('HelloWorld', HelloWorld)
// 全局数据 provide定义.inject注入
app.provide('name', '法外狂徒张三')

/**
 * 全局自定义指令：实现隔行换色效果
 * 通过binding.value接收行索引，奇数行和偶数行应用不同背景色
 */
app.directive('stripe', {
    // 元素挂载时执行
    mounted(el, binding) {
        el.style.backgroundColor = binding.value % 2 ? '#f8f9fa' : '#e9ecef'
    },
    // 元素更新时执行
    updated(el, binding) {
        el.style.backgroundColor = binding.value % 2 ? '#f8f9fa' : '#e9ecef'
    }
})
